<template>
  <div>
    <!-- 条件查询 -->
    <div class="block">
      <span class="demonstration">是否显示</span>
      <el-select v-model="searchEntity.status" placeholder="请选择">
        <el-option label="请选择" value=""></el-option>
        <el-option label="关闭" :value="1"></el-option>
        <el-option label="开启" :value="0"> </el-option>
      </el-select>
      &emsp;&emsp;&emsp;
      <span class="demonstration">配置名称:</span>
      <template>
        <el-select v-model="searchEntity.deployId" placeholder="请选择">
          <el-option value="">请选择</el-option>
          <el-option v-for="item in deployList" :key="item.id" :label="item.deployName" :value="item.id">
          </el-option>
        </el-select>
      </template>
      <span class="demonstration">商品搜索:</span>
      <el-input v-model="searchEntity.msg" style="width: 200px" placeholder="请输入商品Id\名称"></el-input>
      <el-button type="primary" round @click="getSeckGoodsList()">查询</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="seckGoodsList" style="width: 100%" row-key="id" border :fit="true">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="deployName" label="配置">
        <template slot-scope="scope">
          {{ scope.row.deployName }} <br />
          {{ scope.row.startTime }}-{{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="secEndTime" label="秒杀时段">
        <template slot-scope="scope">
          {{ scope.row.secStartTime }}-{{ scope.row.secEndTime }}
        </template>
      </el-table-column>
      <el-table-column prop="imgUrl" label="商品图片">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.smallPic"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="活动标题"> </el-table-column>
      <el-table-column prop="intro" label="活动简介"> </el-table-column>
      <el-table-column prop="price" label="原价"> </el-table-column>
      <el-table-column prop="costPrice" label="秒杀价"> </el-table-column>
      <el-table-column prop="num" label="限量"> </el-table-column>
      <el-table-column prop="stockCount" label="限量剩余"> </el-table-column>
      <el-table-column prop="secStatus" label="秒杀状态">
        <template slot-scope="scope">
          <span v-if="scope.row.secStatus==0">
            未开始
          </span>
          <span v-if="scope.row.secStatus==1">
            已开始
          </span>
          <span v-if="scope.row.secStatus==2">
            已结束
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-color="rgba(67, 129, 230, 1)" inactive-color="#ff4949"
            active-value="0" inactive-value="1" @change="changeStatus($event, scope.row, scope.$index)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="updateCategory(scope.row.id)" type="text" size="small">编辑</el-button>
          <el-button type="text" v-if="scope.row.children == null" size="small" @click="deleteById(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="reloadList(num)" @current-change="reloadList(num)"
        :current-page.sync="searchEntity.page" :page-sizes="[10, 20, 30, 40]" :page-size.sync="searchEntity.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 修改Form -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="seckGoods">
        <el-form-item label="秒杀标题" :label-width="formLabelWidth">
          <el-input v-model="seckGoods.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动简介" :label-width="formLabelWidth">
          <el-input v-model="seckGoods.intro" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="原价" :label-width="formLabelWidth">
          <el-input v-model="seckGoods.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="秒杀价" :label-width="formLabelWidth">
          <el-input v-model="seckGoods.costPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="限量" :label-width="formLabelWidth">
          <el-input v-model="seckGoods.num" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdateDeploy()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {
      token: "",
      seckGoods: {},
      formLabelWidth: "120px",
      deployList: [],
      searchEntity: {
        limit: 10,
        page: 1,
      },
      imgUrl: "",
      id: "",
      dialogFormVisible: false,
      total: 0,
      num: 1,
      seckGoodsList: [], //存放集合
    };
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    doUpdateDeploy () {
      //修改
      this.$http
        .put("http://localhost:8001/coco/seck/goods/updateSeckGoods/" + this.id, this.seckGoods, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              message: "修改配置成功!",
              type: "success",
            });
            this.getSeckGoodsList();
            this.dialogFormVisible = false;
          } else {
            this.$message.error("修改配置失败!");
          }
        })
        .catch((err) => { });
    },
    changeStatus (data, row, index) {
      //修改显示状态
      console.log(data, row, index);
      this.$http
        .get(
          "http://localhost:8001/coco/seck/goods/updateStatus/" + row.id + "/" + data, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        }
        )
        .then(({ data }) => {
          console.log(data);
          if (data.code == 0) {
            this.$message({
              message: "修改成功!",
              type: "success",
            });
            this.reloadList(this.num);
          } else {
            let newData = b;
            newData.publishStatus = newData.publishStatus == 1 ? "0" : "1";
            this.goodsList[index] = newData;
          }
        })
        .catch((err) => { });
    },
    deleteById (id) {
      // 删除
      this.$confirm("此操作将永久删除该秒杀配置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http
          .delete("http://localhost:8001/coco/seck/goods/deleteSecGoods/" + id, {
            headers: {
              "token": this.token,
              "type": "1"
            }
          })
          .then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: "删除商品成功!",
                type: "success",
              });
              this.getSeckGoodsList();
            } else {
              this.$message.error("删除商品失败!");
            }
          })
          .catch((err) => { });
      });
    },
    updateCategory (id) {
      // 修改配置
      this.dialogFormVisible = true;
      this.id = id;
      this.$http
        .get("http://localhost:8001/coco/seck/goods/findById/" + id, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          this.seckGoods = data.data;
          console.log(this.seckGoods);
          this.imgUrl = data.data.smallPic;
        })
        .catch((err) => { });
    },
    getSeckGoodsList () {
      //获取秒杀商品列表
      this.$http
        .post(
          "http://localhost:8001/coco/seck/goods/findSeckGoods",
          this.searchEntity, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        }
        )
        .then(({ data }) => {
          if (data.code != 0) {
            this.$message({
              message: data.message,
              type: 'error'
            })
            this.$router.push("/");
          }
          this.seckGoodsList = data.data;
          this.total = data.data.total;
        })
        .catch((err) => { });
    },

    getfindAllSeckDeploy () {
      //获取配置下拉框
      this.$http
        .get("http://localhost:8001/coco/seck/deploy/findAll", {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          console.log(data);
          this.deployList = data.data;
          console.log(this.deployList);
        })
        .catch((err) => { });
    },
  },

  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created () {
    this.token = localStorage.getItem("token");

    this.getSeckGoodsList();
    this.getfindAllSeckDeploy();
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>

<style>
</style>